<template>
    <div>
        <el-tabs v-model="first">
            <div class="first_content">
                <div class="shoujihao_content">
                    <div  >
                        <img :src="user.wx_avatarurl" alt="" class="touxiang_content_right_img">
                    </div>
                </div>
                <div class="touxiang_content">
                    <div class="touxiang_content_left">
                        <div>{{ user.nickname }}</div>
                    </div>
                </div>
                <div class="shoujihao_content">
                    <div class="shoujihao_content_lebel">状态</div>
                    <div class="shoujihao_content_detail2">{{ user.online_status=='0' ? ".离开":".在线" }} </div>
                </div>
                <div class="shoujihao_content">
                    <div class="shoujihao_content_lebel">手机号</div>
                    <div class="shoujihao_content_detail">{{ user.phone }}</div>
                </div>
                <div class="shoujihao_content">
                    <div class="shoujihao_content_lebel">接量助教</div>
                    <div class="shoujihao_content_detail">{{ user.jieliangzhujiao }}</div>
                </div>
                <div class="shoujihao_content">
                    <div class="shoujihao_content_lebel">直播邀请助教</div>
                    <div class="shoujihao_content_detail">{{ user.yaoqingzhujiao }}</div>
                </div>
                <!-- <div class="shoujihao_content">
                    <div class="shoujihao_content_lebel">本场直播</div>
                    <div class="shoujihao_content_detail">{{ user.dingyue }}</div>
                </div>
                <div class="shoujihao_content">
                    <div class="shoujihao_content_lebel">下一场直播</div>
                    <div class="shoujihao_content_detail">{{ user.nextzhibo }}</div>
                </div> -->
                <div class="shoujihao_content">
                    <div class="shoujihao_content_lebel">在线总时长</div>
                    <div class="shoujihao_content_detail">{{ user.zaixian_shichang }}</div>
                </div>
            </div>
        </el-tabs>
    </div>
</template>


<script>

import {getUserInfo} from '@/api/live/action.js';

export default {

    data() {

        return {
            first:'a',
            user:{
                nickname:'毛毛虫老师',
                state:'离开',
                touxaing:'',
                phone:'',
                zhujiao:'助教老师一',
                yaoqing_zhujiao:'直播邀请助教',
                dingyue:'已订阅',
                nextzhibo:'未订阅',
                zaixian:'01:02:10'
            }

        }

    },
    props: {
        liveId: {
            type: String,
            default: ''
        },
        live_user_id: {
            type: String,
            default: ''
        }
    },
    created(){

        this.init();
    },
    methods:{
        init(){
            let _param = {
                liveId:this.$props.liveId,
                live_user_id:this.$props.live_user_id,
                pageSize:10,
                pageNumber:1
            }
            getUserInfo(_param).then((res)=>{
                this.user = res.data.list[0];
                console.log(this.user);
            });

        }
    }

}
</script>




<style>

.first_content {
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: rgb(230, 228, 228);

}

.state_content {
    width: 100%;
    display: flex;
    box-shadow: 20em;
    justify-content: left;
    margin-top: 20px;

}

.touxiang_content {
    width: 100%;
    display: flex;
    box-shadow: 20em;
    justify-content: center;
    margin-top: 20px;
}

.touxiang_content_left {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.touxiang_content_right {
    display: flex;
    position: absolute;
    right: 10px;
    justify-content: center;
}

.touxiang_content_right_img {
    width: 100px;
    height: 100px;
    border-radius: 100px;
}

.shoujihao_content{
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    justify-content: center;
    align-content: left;
    align-items: center;
}

.shoujihao_content_lebel{
    font-size: medium;
    justify-content: center;
    align-content: center;
    color: gray;
}

.shoujihao_content_detail{
    font-size: medium;
    justify-content: center;
    align-content: center;
    margin-top: 5px;
}


.shoujihao_content_detail2{
    font-size: medium;
    justify-content: center;
    align-content: center;
    background: rgb(206, 205, 205);
    border-radius: 10px;
    padding: 5px 15px 5px 15px;
    color: white;
}


/* .userinfo_content_left {
    width: 70%;
} */
</style>
